<template>
    <div class="container content">
        <div class="placeholder" v-if="isSidebarFixed"></div>
        <div class="sidebar">
            <!-- ︾ -->
            <div class="meau">
                <input type="checkbox" id="/css" class="toggle" @click="toId">
                <label for="/css" class="label">伪类和伪元素 <span>︾</span></label>
                <dl class="menu">
                    <dd><a href="#pseudoclass">伪类选择器</a></dd>
                    <dd><a href="#pseudo-elements">伪元素选择器</a></dd>
                    <dd><a href="#examples">实例</a></dd>
                </dl>
            </div>
            <div class="meau">
                <input type="checkbox" id="/css/animation" class="toggle" @click="toId">
                <label for="/css/animation" class="label">CSS3动画 <span>︾</span></label>
                <!--  <dl class="menu">
                        <dd><a href="#pseudoclass">伪类选择器</a></dd>
                        <dd><a href="#pseudo-elements">伪元素选择器</a></dd>
                        <dd><a href="#examples">实例</a></dd>
                    </dl> -->
            </div>
        </div>
        <RouterView></RouterView>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
//阻止a标签的跳转
function noSkip(event: Event) {
    event.preventDefault();
}
//占位是否显示
const isSidebarFixed = ref(false)
//滑动时固定侧边栏
function fixSidebar() {
    const sidebar = document.querySelector('.sidebar') as HTMLElement;
    const sidebarWidth = sidebar.offsetWidth;
    const scrollTop = document.documentElement.scrollTop;
    if (scrollTop >= sidebarWidth - 40) {

        sidebar.style.position = 'fixed';
        sidebar.style.top = '0';
        isSidebarFixed.value = true;
    } else {
        sidebar.style.position = 'static';
        isSidebarFixed.value = false;
    }

}
//点击跳转路由
function toId(e: MouseEvent) {
    const id = (e.target as HTMLInputElement)?.id;//获取点击的id
    router.push(`${id}`)
}
onMounted(() => {
    window.addEventListener('scroll', fixSidebar);
})
</script>

<style lang='scss' scoped>
.content {
    display: flex;
    width: 100vw;
    margin: 20px auto;

    .placeholder {
        height: 1px;
        width: 240px;
        background-color: rgb(246, 246, 246);
        z-index: -1;
    }

    .sidebar {
        /* min-height: 0; */
        height: 100vh;
        width: 240px;
        flex: 1 50px;
        background-color: white;
        overflow: auto;
        z-index: 1;

        .meau {
            font-size: 20px;
            letter-spacing: 2px;

            .toggle {
                display: none;
            }

            .label {
                margin-top: 10px;
                margin-left: 10px;
                position: relative;
                display: block;
                font-weight: 600;

                span {
                    /*  position: absolute;
                    top: 4px;
                    right: 20px; */
                    /* margin-top: 8px; */
                    margin-left: 40px;
                }

            }

            dd {
                padding-left: 20px;
                border-bottom: 1px solid #5d5b5b;
                margin-bottom: 10px;

                a {
                    font-size: 16px;
                    color: rgb(85, 81, 81);
                }
            }

            dd:hover {
                //改变鼠标样式
                cursor: pointer;
            }

            .menu {
                margin: 0;
                background-color: #f9f9f9;
                /*  position: absolute;
                top: 100%;*/
                width: 100%;
                z-index: 1;
                display: none;
            }

            .toggle:checked~.menu {
                display: block;
            }

        }

        .meau:nth-child(2) {
            span {
                /*  position: absolute;
                    top: 4px;
                    right: 20px; */
                /* margin-top: 8px; */
                margin-left: 69px;
            }
        }
    }


}
</style>